<template>
  <div class="user">
    <el-form :model="ruleForm" :rules="rules" ref="formRef">
      <el-form-item label="账号" prop="name">
        <el-input v-model="ruleForm.name" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="ruleForm.password" show-password />
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { reactive,ref } from "vue";
import type { FormInstance, FormRules, ElForm } from "element-plus";
import { ElMessage } from "element-plus";

const formRef = ref<InstanceType<typeof ElForm>>()

const ruleForm = reactive({
  name: "",
  password: "",
});

const rules = reactive({
  name: [{ required: true, message: "请输入账号", trigger: "blur" }],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
});

const Login = () => {
    formRef.value?.validate((valid) => {
        if(valid){
            ElMessage({
                message: "登录验证成功！",
                type: "success"
            })
        }else{
            ElMessage({
                message: "登录验证失败！",
                type: "error"
            })
        }
    })
};

defineExpose({
  Login,
});
</script>

<style scoped></style>
